<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box{
				width: 600px;
				height: 550px;
				border: 1px solid #000;
				background-color: #9cbc2c;
				background-clip: content-box;
				padding:20px;
			}
			.form {
				border-radius: 15%;
				width: 600px;
				height: 550px;
			}

			.tab1 {
				margin-top: 8px;
				width: 560px;
				height: 50px;
				background-color: white;
				position: relative;
				left: 20px;
				top: 10px;
				margin-top: 20px;
				border-radius: 4%;
			}
			.tab1 input{
				margin: 13px;
				position: relative;
				left: 40px;
			}
			.button{
				position: relative;
				top: 20px;
				left: 250px;
				color: white;
				background-color: rgba(0, 0, 0, 0.6);
				width: 90px;
				height: 30px;
				border-radius:30%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<form class="form">
				<div class="tab1">
					用户昵称:
					<input type="text">
				</div>
				<div class="tab1">
					Email:
					<input type="email">
				</div>
				<div class="tab1">
					工作年龄:
					<input type="range" max="20" min="2">
				</div>
				<div class="tab1">
					年龄:
					<input type="number">
				</div>
				<div class="tab1">
					出生日期:
					<input type="date">
				</div>
				<div class="tab1">
					个人主页:
					<input type="search">
				</div>
				<div class="tab1">
					获取颜色值:
					<input type="color">
				</div>
				<button class="button">注册</button>
				</form>
			
		</div>
	</body>
</html>
